<template>
  <div class="large-screen-cockpit">
    <!-- 顶部告警条 -->
    <div v-if="showAlarmBar" class="alarm-bar">
      <i class="el-icon-warning"></i>
      车间OEE低于{{ alarmThresholds.oee }}%，请及时处理！
    </div>
    <!-- 头部信息 -->
    <div class="display-header">
      <div class="header-left">
        <h1>诊断系统统计中心</h1>
        <div class="datetime">{{ currentDateTime }}</div>
      </div>
      <div class="header-right">
        <el-select v-model="selectedUnit" placeholder="选择机组" size="mini" style="width: 120px">
          <el-option label="1机组" value="1"></el-option>
          <el-option label="2机组" value="2"></el-option>
        </el-select>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="display-content">
      <!-- 设备状态监控 -->
      <div class="device-status" @click="showDetail('设备状态', deviceStatus)">
        <h3>设备状态监控</h3>
        <div class="device-list">
          <div
            v-for="dev in deviceStatus"
            :key="dev.id"
            class="device-item"
            :class="{ abnormal: dev.abnormal, flashing: dev.abnormal }"
          >
            <span>{{ dev.name }}</span>
            <span>{{ dev.status }}</span>
          </div>
        </div>
      </div>
      <!-- 关键指标轮播 -->
      <div class="key-metrics-carousel" @click="showDetail('关键指标', keyMetrics)">
        <div class="carousel-container">
          <div
            v-for="(metric, idx) in keyMetrics"
            :key="metric.label"
            class="metric-item"
            :class="{ active: currentMetricIndex === idx }"
            v-show="currentMetricIndex === idx"
          >
            <div class="metric-value">{{ metric.value }}</div>
            <div class="metric-label">{{ metric.label }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 告警设置 -->
    <el-drawer title="告警设置" :visible.sync="alarmDrawer" size="30%">
      <el-form label-width="100px">
        <el-form-item label="OEE阈值">
          <el-input-number v-model="alarmThresholds.oee" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="利用率阈值">
          <el-input-number v-model="alarmThresholds.utilization" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-button type="primary" @click="saveAlarmThresholds">保存</el-button>
      </el-form>
    </el-drawer>
    <el-button class="alarm-setting-btn" @click="alarmDrawer = true" size="mini">告警设置</el-button>
    <!-- 下钻详情 -->
    <el-dialog :visible.sync="detailDialogVisible" width="600px" title="详细数据">
      <div>
        <h3>{{ detailData.title }}</h3>
        <pre>{{ JSON.stringify(detailData.data, null, 2) }}</pre>
        <el-button @click="generateSnapshot">生成决策支持快照</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "LargeScreenCockpit",
  data() {
    return {
      currentDateTime: "",
      selectedUnit: "1",
      // 设备状态
      deviceStatus: [
        { id: 1, name: "设备A", status: "正常", abnormal: false },
        { id: 2, name: "设备B", status: "异常", abnormal: true },
        { id: 3, name: "设备C", status: "正常", abnormal: false }
      ],
      // 关键指标
      keyMetrics: [
        { label: "OEE", value: "65.2%" },
        { label: "停机时长", value: "2.3h" },
        { label: "设备利用率", value: "92.1%" }
      ],
      currentMetricIndex: 0,
      // 告警
      showAlarmBar: false,
      alarmDrawer: false,
      alarmThresholds: {
        oee: 70,
        utilization: 90
      },
      // 下钻
      detailDialogVisible: false,
      detailData: { title: "", data: {} }
    };
  },
  mounted() {
    this.updateDateTime();
    this.checkAlarm();
    this.carouselTimer = setInterval(this.nextMetric, 10000);
    this.timeTimer = setInterval(this.updateDateTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.carouselTimer);
    clearInterval(this.timeTimer);
  },
  methods: {
    updateDateTime() {
      const now = new Date();
      this.currentDateTime = now.toLocaleString();
    },
    nextMetric() {
      this.currentMetricIndex = (this.currentMetricIndex + 1) % this.keyMetrics.length;
      this.checkAlarm();
    },
    checkAlarm() {
      // OEE告警
      const oee = parseFloat(this.keyMetrics[0].value);
      this.showAlarmBar = oee < this.alarmThresholds.oee;
      // 设备利用率高亮
      const utilization = parseFloat(this.keyMetrics[2].value);
      this.deviceStatus.forEach(dev => {
        dev.abnormal = dev.status === "异常" || utilization > this.alarmThresholds.utilization;
      });
    },
    saveAlarmThresholds() {
      localStorage.setItem("alarmThresholds", JSON.stringify(this.alarmThresholds));
      this.checkAlarm();
      this.alarmDrawer = false;
      this.$message.success("阈值已保存");
    },
    showDetail(title, data) {
      this.detailData = { title, data };
      this.detailDialogVisible = true;
    },
    generateSnapshot() {
      const snapshot = {
        time: new Date().toLocaleString(),
        ...this.detailData
      };
      let arr = JSON.parse(localStorage.getItem("snapshots") || "[]");
      arr.push(snapshot);
      localStorage.setItem("snapshots", JSON.stringify(arr));
      this.$message.success("快照已保存到本地");
    }
  }
};
</script>

<style scoped>
.large-screen-cockpit {
  background: #0a1d3a;
  color: #fff;
  min-height: 100vh;
  position: relative;
}
.display-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px 0 40px;
}
.datetime {
  font-size: 16px;
  opacity: 0.8;
}
.display-content {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 30px;
}
.device-status {
  background: rgba(30, 60, 114, 0.7);
  border-radius: 10px;
  padding: 20px;
  min-width: 300px;
  cursor: pointer;
}
.device-list {
  margin-top: 10px;
}
.device-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #1e90ff33;
  font-size: 16px;
}
.device-item.abnormal {
  color: #ff4d4f;
  font-weight: bold;
}
.device-item.flashing {
  animation: flash 1s infinite;
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.key-metrics-carousel {
  background: rgba(42, 82, 152, 0.7);
  border-radius: 10px;
  padding: 20px 40px;
  min-width: 300px;
  cursor: pointer;
}
.carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.metric-item {
  opacity: 0.5;
  transition: opacity 0.3s;
  text-align: center;
}
.metric-item.active {
  opacity: 1;
}
.metric-value {
  font-size: 32px;
  font-weight: bold;
  color: #67c23a;
}
.metric-label {
  font-size: 16px;
  margin-top: 8px;
}
.alarm-bar {
  background: linear-gradient(90deg, #ff4d4f, #ff7875);
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  animation: flash 1s infinite;
}
.alarm-setting-btn {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 10;
}
</style>
